<!--回复管理-->
<template>
  <!-- 搜索 -->
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="回复内容">
          <el-input v-model="queryInfo.content" placeholder="请输入" clearable style="width: 200px;"/>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="getReplyList">搜索</el-button>
      </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100% ;text-align: center;">
      <el-table-column prop="id" label="编号" width="80" />
      <el-table-column prop="content" label="回复内容" show-overflow-tooltip />
      <el-table-column prop="createTime" label="回复时间"  />
      <el-table-column prop="question.id" label="问题ID" />
      <el-table-column prop="userId" label="回复者名称" />
      <<el-table-column label="操作" width="200px ">
          <template #default="scope">
              <el-button size="small" type="primary" @click="handleDetails(scope.row)">
                  详细
              </el-button>
              <el-button size="small" @click="handleEdit(scope.row)">
                  修改
              </el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row.replyId)">
                  删除
              </el-button>
          </template>
          </el-table-column>
  </el-table>
   <!-- 分页 -->
   <el-pagination
      v-model:current-page="queryInfo.pageNum"
      v-model:page-size="queryInfo.pageSize"
      :page-sizes="[1, 5, 10, 20]"
      :size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>

      <!-- 详细表 -->
      <el-drawer v-model="visible" :show-close="false">
          <template #header="{ close, titleId, titleClass }">
              <h4 :id="titleId" :class="titleClass">问题回复表详情!</h4>
              <el-button type="danger" @click="close">
                  <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                  Close
              </el-button>
          </template>
          <div :model="selectedRow">
              <div class="com1">
                  <p><b>问题发布人：</b> {{selectedRow.question.user.userName}}</p>
                  <p><b>发布时间：</b> {{selectedRow.question.questionCreatetime}}</p>
                  <p><b>问题：</b> {{selectedRow.question.questionTitle}}</p>
                  <p><b>问题陈述：</b> {{selectedRow.question.questionContent}}</p>
              </div>
              <div class="com1">
                  <p><b>回复人：</b> {{selectedRow.user.userName}}</p>
                  <p><b>回复时间：</b> {{selectedRow.replyCreateTime}}</p>
                  <p><b>回复内容：</b> {{selectedRow.replyReplyText}}</p>
              </div>              
          </div>   
      </el-drawer>
      <!-- 修改 -->
        <!-- 修改 -->
      <el-dialog v-model="saveOrUpdateVisible" :title="修改回复"  width="500" @close="close">
          <el-form :model="reply" status-icon >        
              <el-form-item label="回复内容"  :label-width="formLabelWidth"  >
                  <el-input
                      v-model="reply.replyReplyText"
                      style="width: 300px"
                      :rows="6"
                      type="textarea"
                      placeholder="请输入内容"
                  />
              </el-form-item>  
          </el-form>
                      <template #footer>
                      <div class="dialog-footer">
                          <el-button @click="close">取消</el-button>
                          <el-button type="primary" @click="saveOrUpdate">
                          确定
                          </el-button>
                      </div>
                      </template>
      </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import { onMounted } from 'vue';
const tableData = ref([]);
const total = ref(0);
const visible = ref(false);
import { useRoute } from 'vue-router';
import question from './Question.vue';

const route = useRoute();
// 详细
const selectedRow = ref();
const saveOrUpdateVisible = ref(false);
const reply = ref({});

const queryInfo = ref({
  pageNum: 1,
  pageSize: 5,
  content: '',
  questionId: route.params.questionId
});
console.log(queryInfo.value.questionId)


// 详细
const handleDetails = (row) => {
  visible.value = true;
  selectedRow.value = row;
  // console.log(row.question.questionTitle)
  // console.log(selectedRow.value.question.questionTitle)
  // console.log(selectedRow.value)
}

onMounted(() => {
  getReplyList();
})

const getReplyList=()=>{
  axios.get('http://localhost:8080/reply/FindByPage', {
    params: queryInfo.value,
    headers: {
      'Accept': 'application/json'
    }
  })
  .then(resp => {
    let result = resp.data;
         console.log(result.data)
         total.value = result.data.total;
         if (result.code == 200) {
             tableData.value = result.data.list
         } else {
             console.log('获取问题列表失败')
         }
  })
}
// 修改
const handleEdit = (row) => {
  saveOrUpdateVisible.value = true;
  reply.value = row
}
// 取消
const close = () => {
  saveOrUpdateVisible.value = false;
}
// 确定
const saveOrUpdate = () => {
  axios.put('/reply/edit',reply.value)
  .then(resp=>{
      let result = resp.data;
      if(result.code==1){
          getReplyList();
          ElMessage({
              message: '修改成功！',
              type: 'success',
          })
      }else{
          ElMessage({
              message: '修改失败！',
          })
      }
  })
  close();
}
// 删除
const handleDelete = (replyId) => {
  ElMessageBox.confirm(
      '真的要删除吗？',
      '提示',
      {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
      })
      .then(() => {
          axios.delete('/reply/del', {
              params: { replyId: replyId }
          })
      .then(resp => {
          let result = resp.data;
          if (result.code == 1) {
              getReplyList();
              ElMessage({
                  message: '删除成功！',
                  type: 'success',
              })
          } else {
              ElMessage({
                  message: '删除失败！',
                  type: 'warning',
              })    
             
          }
      })

   })
}
// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
queryInfo.value.pageSize = pageSize;
getReplyList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
queryInfo.value.pageNum = pageNum;
getReplyList();
}
</script>

<style  scoped>
.com1{
  margin-bottom: 20px;
}
.com1 p{
  padding: 10px 0;
}
</style>
